<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./picture/favicon.ico" />
    <title>Apple Store 教育商店</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            height: 44px;
            display: flex;
            /* flex 布局 */
            justify-content: center;
            /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
            flex-wrap: wrap;
            /* flex-wrap 属性规定弹性项目是否应换行。wrap 可以换行 */
            position: fixed;
            z-index: 100;
        }

        .top {
            width: 75%;
            display: flex;
        }

        .top_menu {
            width: 85%;
            margin-left: 50px;
        }

        .top_menu a {
            float: left;
            display: block;
            text-decoration: none;
            color: rgba(173, 173, 173, 1);
            font-size: 12px;
            padding: 14px 3% 14px 3%;
        }

        .first {
            width: auto;
            display: flex;
            position: relative;
            left: auto;
            margin: 0 auto;
            /* border: solid red; */
            flex-direction: column;
        }

        .head1 {
            margin: 0 auto;
            width: 900px;
            /* border: solid black; */
            font-size: 55px;
            text-align: center;
            margin-top: 55px;
        }

        .p1 {
            font-size: 20px;
            text-align: center;
            /* border: solid greenyellow; */
            margin-top: 30px;
        }

        .link {
            text-align: center;
            color: rgb(0, 102, 204);
            font-size: 22px;
            font-weight: 10px;
            text-decoration: none;
        }

        .picture {
            margin: 0 auto;
            width: 730px;
            margin-top: 20px;
        }

        .pp {
            display: flex;
        }

        .text {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .l1 {
            margin: 0 auto;
        }

        .line1 {
            margin-top: 150px;
            font-size: 27px;
            font-weight: 600;
        }

        .line2 {
            margin-top: 20px;
            font-size: 20px;
            font-weight: 100;
        }

        .big {
            margin: 0 auto;
            /* border: solid black; */
            display: flex;
            height: 200px;
            width: 800px;
            margin-top: 80px;
            justify-content: space-around;
        }

        .m1 {
            width: 200px;
            height: 200px;
            display: inline-block;
            justify-content: space-around;
            /* border: solid red; */
            background-image: url(./picture/电话.png);
            background-repeat: no-repeat;
            background-size: auto;
            background-position: center;
        }

        .m2 {
            width: 200px;
            height: 200px;
            display: inline-block;
            /* border: solid blue; */
            background-image: url(./picture/交流.png);
            background-repeat: no-repeat;
            background-size: auto;
            background-position: center;
            justify-content: space-between;
        }

        .m3 {
            width: 200px;
            height: 200px;
            display: inline-block;
            /* border: solid yellow; */
            background-image: url(./picture/零售店.png);
            background-repeat: no-repeat;
            background-size: auto;
            background-position: center;
            justify-content: space-between;
        }

        .mm {
            margin: 0;
            padding: 0;
        }

        .wb {
            margin: 0 auto;
            /* border: solid black; */
            width: 1200px;
            margin-top: 50px;
        }

        .pr {
            display: block;
            font-weight: 100;
            font-size: 10px;
            color: gray;
            margin: 2px;
        }

        .ht-dn {
            background-color: #f5f5f7;
            width: 100%;
            /* height: 480px; */
            margin-top: 100px;

        }

        .ht-nav {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            /* 默认不拆行或不拆列。 */
        }

        .ht-u1 {
            float: left;
        }

        .ht-u1 ul {
            text-align: left;
        }

        .ht-u1 ul li {
            list-style-type: none;
            margin: 5px 0;
        }

        .ht-u1 ul li a {
            text-decoration: none;
            font-size: 11px;
            color: #424245;
        }


        .ht-u1 h3 {
            margin-top: 15px;
            color: #1d1d1f;
            font-size: 11px;
        }

        .ht-dn a:hover {
            text-decoration: underline;
        }

        @media screen and (max-width:920px) {

            .big1 {
                display: none;
            }

            .small1 {
                display: block;
            }

        }

        /*       !!!!!!!!!!!!分割!!!!!!!!!!      */
        .small1 {
            width: 90%;
            margin: 0 auto;
        }

        .ht-u2 ul {
            /* width: 90%; */
            padding: 5px 0px;
        }

        .ht-u2 ul li {
            width: 100%;
            height: 100%;
            list-style: none;
            padding: 0 12px;
            font-size: 12px;
        }

        .ht-u2 ul ol {
            width: 100%;
            height: 0;
            overflow: hidden;

        }

        .ht-u2 ul ol li {
            width: 100%;
            height: 100%;
            text-align: left;
            padding: 5px 0px;
        }

        .ht-u2 ul ol li a {
            color: gray;
            font-size: 11px;
            text-decoration: none;
            padding: 5px 12px;
        }

        .ht-u2 ul li:hover ol {
            height: 100%;
        }

        .ht-u2 ul li ol a:hover {
            color: #000000;
        }


        @media screen and (min-width:920px) {

            .big1 {
                width: 75%;
                margin: 0 auto;
                display: flex;
                justify-content: space-around;
            }

            .small1 {
                display: none;
            }

        }

        .small1 hr {
            width: 100%;
        }

        /* --------------------- */

        .ht-du {
            width: 100%;
            margin-top: 60px;
            padding-bottom: 30px;
        }

        .ht-du-nav {
            width: 68%;
            margin: 0 auto;
        }

        .ht-du-nav p {
            margin-top: 8px;
            margin-bottom: 8px;
            font-size: 10px;
            color: gray;
            /* text-align: center; */
        }

        .ht-du-nav p a {
            color: #06c;
        }

        @media screen and (max-width:850px) {
            .ht-du-nav {
                width: 100%;
            }

        }
    </style>
</head>

<body>
    <header>
        <div class="top">

            <div class="menu">
                <div class="m"></div>
            </div>

            <div class="picture1 a1">
                <a href="./Apple-index.html"><img src="./picture/apple-top.svg"></a>
            </div>

            <div class="top_menu">
                <a href="#">商店</a>
                <a href="#">Mac</a>
                <a href="#">iPad</a>
                <a target="_blank" href="./iphone.html">iPhone</a>
                <a href="#">Watch</a>
                <a href="#">AirPods</a>
                <a href="#">Apple独家</a>
                <a href="#">配件</a>
                <a href="#">技术支持</a>
            </div>

            <div class="picture1 b1">
                <a href="#"><img src="./picture/fd.png"></a>
            </div>
            <div class="picture1 c1">
                <a href="#"><img src="./picture/bb.svg"></a>
            </div>
        </div>

    </header>
    <div class="first">
        <h1 class="head1">
            入手新 Mac 或 iPad，乐享 Apple
        </h1>
        <h1 class="head1"> 教‍育‍优‍惠。</h1>

        <p class="p1">面向在读及新录取的高校学生，以及各级教师和教职员工 *。需要先验证资格 **。</p>

        <a href="#" class="link">通过UNiDAYS进行验证**></a>
    </div>
    <div class="pp">
        <img class="picture" src="./picture/尼哥.png" alt="">
    </div>

    <div class="text">
        <p class="line1 l1">需要协助选购？</h2>
        <p class="line2 l1">让 Apple Specialist 专家一对一帮你选购。</h3>
    </div>

    <div class="big">
        <div class="m1 mm"></div>
        <a href="#" class="m2 mm"></a>
        <a href="#" class="m3 mm"></a>
    </div>

    <div class="wb">
        <p class="pr">* 购买数量会有所限制。访问 Apple Store 教育商店了解完整详情。</p>
        <p class="pr">** 为核实你的学生或教职员工身份，你将被重定向至第三方网站 UNiDAYS，并将受到其隐私政策(在新窗口中打开)的约束。如果注册并使用该网站，你所提供的数据将由 UNiDAYS (而非
            Apple) 单独拥有、控制和处理。</p>
        <p class="pr">†† 我们会使用你所在位置，为你更快显示送货选项。我们通过你的 IP 地址，或者你在上次访问 Apple 网站时输入的位置信息，找到了你的位置。
        </p>
    </div>

    <div class="ht-dn">
        <div class="ht-nav">


            <div class="big1">
                <div class="ht-u1">
                    <h3>
                        选购及了解
                    </h3>
                    <ul>
                        <li><a href="#">商店</a></li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">iPad</a></li>
                        <li><a target="_blank" href="./iphone.html">iPhone</a></li>
                        <li><a href="#">Watch</a></li>
                        <li><a href="#">AirPods</a></li>
                        <li><a href="#">家具</a></li>
                        <li><a href="#">iPod touch</a></li>
                        <li><a href="#">AirTag</a></li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">App Store 充值卡</a></li>
                    </ul>
                </div>
                <div class="ht-u1">
                    <h3>
                        服务
                    </h3>
                    <ul>
                        <li><a href="#">Apple Music</a></li>
                        <li><a href="#">iCloud</a></li>
                        <li><a href="#">Apple Pay</a></li>
                        <li><a href="#">Apple 播客</a></li>
                        <li><a href="#">App Store</a></li>
                    </ul>

                    <h3>
                        账户
                    </h3>

                    <ul>
                        <li><a href="#">管理你的 Apple ID</a></li>
                        <li><a href="#">Apple Store 账户</a></li>
                        <li><a href="#">iCloud.com</a></li>
                    </ul>
                </div>
                <div class="ht-u1">
                    <h3>
                        Apple Store 商店
                    </h3>
                    <ul>
                        <li><a href="#">查找零售店</a></li>
                        <li><a href="#">Genius Bar 天才吧</a></li>
                        <li><a href="#">Today at Apple</a></li>
                        <li><a href="#">Apple 夏令营</a></li>
                        <li><a href="#">Apple Store App</a></li>
                        <li><a href="#">翻新和优惠</a></li>
                        <li><a href="#">分期付款</a></li>
                        <li><a href="#">Apple Trade In 换购计划</a></li>
                        <li><a href="#">订单状态</a></li>
                        <li><a href="#">选购帮助</a></li>
                    </ul>
                </div>
                <div class="ht-u1">
                    <h3>
                        商务应用
                    </h3>
                    <ul>
                        <li><a href="#">Apple 与商务</a></li>
                        <li><a href="#">商务选购</a></li>

                    </ul>
                    <h3>
                        教育应用
                    </h3>
                    <ul>
                        <li><a href="#">Apple 与教育</a></li>
                        <li><a href="#">高校师生选购</a></li>

                    </ul>
                </div>
                <div class="ht-u1">
                    <h3>
                        Apple 价值观
                    </h3>
                    <ul>
                        <li><a href="#">辅助功能</a></li>
                        <li><a href="#">环境负责</a></li>
                        <li><a href="#">隐私</a></li>
                        <li><a href="#">供应商责任</a></li>
                    </ul>

                    <h3>
                        关于 Apple
                    </h3>

                    <ul>
                        <li><a href="#">Newsroom</a></li>
                        <li><a href="#">Apple 管理层</a></li>
                        <li><a href="#">工作机会</a></li>
                        <li><a href="#">创造就业</a></li>
                        <li><a href="#">商业道德与合规性</a></li>
                        <li><a href="#">活动</a></li>
                        <li><a href="#">联系 Apple</a></li>
                    </ul>
                </div>

            </div>



            <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!分割线!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
            <div class="small1">
                <div class="ht-u2">
                    <ul>
                        <li>选购及了解
                            <ol>
                                <li><a href="#">商店</a></li>
                                <li><a href="#">Mac</a></li>
                                <li><a href="#">iPad</a></li>
                                <li><a target="_blank" href="./iphone.html">iPhone</a></li>
                                <li><a href="#">Watch</a></li>
                                <li><a href="#">AirPods</a></li>
                                <li><a href="#">家具</a></li>
                                <li><a href="#">iPod touch</a></li>
                                <li><a href="#">AirTag</a></li>
                                <li><a href="#">配件</a></li>
                                <li><a href="#">App Store 充值卡</a></li>
                            </ol>

                        </li>

                    </ul>
                </div>
                <hr>
                <div class="ht-u2">
                    <ul>
                        <li>服务
                            <ol>
                                <li><a href="#">Apple Music</a></li>
                                <li><a href="#">iCloud</a></li>
                                <li><a href="#">Apple Pay</a></li>
                                <li><a href="#">Apple 播客</a></li>
                                <li><a href="#">App Store</a></li>

                            </ol>
                        </li>
                    </ul>
                    <hr>
                    <ul>
                        <li>账户
                            <ol>
                                <li><a href="#">管理你的 Apple ID</a></li>
                                <li><a href="#">Apple Store 账户</a></li>
                                <li><a href="#">iCloud.com</a></li>
                            </ol>
                        </li>

                    </ul>
                </div>
                <hr>
                <div class="ht-u2">
                    <ul>
                        <li>Apple Store 商店
                            <ol>
                                <li><a href="#">查找零售店</a></li>
                                <li><a href="#">Genius Bar 天才吧</a></li>
                                <li><a href="#">Today at Apple</a></li>
                                <li><a href="#">Apple 夏令营</a></li>
                                <li><a href="#">Apple Store App</a></li>
                                <li><a href="#">翻新和优惠</a></li>
                                <li><a href="#">分期付款</a></li>
                                <li><a href="#">Apple Trade In 换购计划</a></li>
                                <li><a href="#">订单状态</a></li>
                                <li><a href="#">选购帮助</a></li>
                            </ol>
                        </li>

                    </ul>
                </div>
                <hr>
                <div class="ht-u2">

                    <ul>
                        <li>商务应用
                            <ol>
                                <li><a href="#">Apple 与商务</a></li>
                                <li><a href="#">商务选购</a></li>
                            </ol>
                        </li>


                    </ul>
                    <hr>
                    <ul>
                        <li>教育应用
                            <ol>
                                <li><a href="#">Apple 与教育</a></li>
                                <li><a href="#">高校师生选购</a></li>
                            </ol>
                        </li>


                    </ul>
                </div>
                <hr>
                <div class="ht-u2">

                    <ul>
                        <li>Apple 价值观
                            <ol>
                                <li><a href="#">辅助功能</a></li>
                                <li><a href="#">环境负责</a></li>
                                <li><a href="#">隐私</a></li>
                                <li><a href="#">供应商责任</a></li>
                            </ol>
                        </li>

                    </ul>
                    <hr>
                    <ul>
                        <li>关于 Apple
                            <ol>
                                <li><a href="#">Newsroom</a></li>
                                <li><a href="#">Apple 管理层</a></li>
                                <li><a href="#">工作机会</a></li>
                                <li><a href="#">创造就业</a></li>
                                <li><a href="#">商业道德与合规性</a></li>
                                <li><a href="#">活动</a></li>
                                <li><a href="#">联系 Apple</a></li>
                            </ol>
                        </li>
                    </ul>
                    <hr>
                </div>
            </div>

        </div>
        <div class="ht-du">
            <div class="ht-du-nav">
                <p>更多选购方式：
                    <a>查找你附近的 Apple Store 零售店</a>
                    &nbsp;及
                    <a>更多门店</a>
                    ，或者致电 400-666-8800。
                </p>
                <hr>
                <p>Copyright © 2021 Apple Inc. 保留所有权利。
                    &nbsp;&nbsp;&nbsp;隐私政策
                    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;使用条款
                    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;销售政策
                    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;法律信息
                    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;网站地图</p>
                <p>京ICP备10214630 营业执照 无线电发射设备销售备案编号11201910351200</p>

            </div>
        </div>

    </div>

</body>

</html>